<template>
  <div class="nav-box">
    <el-container>
      <el-aside width="15%">
        <el-menu
          router
          :default-active="defauletActive"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          @open="handleOpen"
          @close="handleClose"
          text-color="#fff"
          active-text-color="#7fdbfd"
        >
          <template v-for="(item, index) in navMenu">
            <el-menu-item :index="item.path" :key="index">
              <i :class="item.icon" class="icon"></i>
              {{ item.title }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import "@/assets/css/asideBar.less";
export default {
  name: "Usermanage", //用户管理
  data() {
    return {
      navMenu: [
        {
          title: "用户管理",
          path: "/userManage/userManagement",
          icon: "icon-extend-users iconfont fs",
        },
        {
          title: "账号安全",
          path: "/userManage/accountSecurity",
          icon: "icon-zhanghaoanquan iconfont fs",
        },
      ],
      defauletActive: "",
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    changeRouter() {
      this.defauletActive = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
    },
  },
  watch: {
    $route() {
      this.changeRouter();
    },
  },
  created() {
    this.changeRouter();
  },
};
</script>

<style lang='less' scoped>
.icon {
  color: inherit;
  font-weight: bold;
}

.fs {
  font-size: 0.27rem !important;
  margin-bottom: 3px !important;
  margin-right: 0.01rem !important;
}
</style>
